<template>
  <div>





    <el-select @change="change_type" v-model="userType" placeholder="请选择用户类型">
      <el-option v-for="dict in [
        { value: 0, key: 0, label: '普通用户' },
        { value: 1, key: 1, label: '特权账号' },
        { value: 2, key: 2, label: '全部' },
      ]" :key="dict.value" :label="dict.label" :value="dict.value" />
    </el-select>


    <el-row :gutter="15" class="panel-group">
      <el-col :xs="24" :sm="12" :lg="6" class="card-panel-col">
        <div class="card-panel" @click="handleSetLineChartData('newVisitis')">
          <div class="card-panel-icon-wrapper icon-people">
            <i class="el-icon-user card-panel-icon"></i>
          </div>
          <div class="card-panel-description">
            <div class="card-panel-text">当前总用户</div>
            <count-to :start-val="0" :end-val="profit.countUser" :duration="2600" class="card-panel-num" />
            <div>
              <i class="el-icon-top" style="font-size: 20px; color: red">{{
                  total.todayCount
              }}</i>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :xs="24" :sm="12" :lg="6" class="card-panel-col">
        <div class="card-panel" @click="handleSetLineChartData('messages')">
          <div class="card-panel-icon-wrapper icon-message">
            <i class="el-icon-data-line card-panel-icon"></i>
          </div>
          <div class="card-panel-description">
            <div class="card-panel-text">背包总价值</div>
            <count-to :start-val="0" :end-val="profit.backpack" :duration="3000" class="card-panel-num" />
          </div>
        </div>
      </el-col>
      <el-col :xs="24" :sm="12" :lg="6" class="card-panel-col">
        <div class="card-panel" @click="handleSetLineChartData('purchases')">
          <div class="card-panel-icon-wrapper icon-money">
            <i class="el-icon-coin card-panel-icon"></i>
          </div>
          <div class="card-panel-description">
            <div class="card-panel-text">玩家总余额</div>
            <count-to :start-val="0" :end-val="profit.userYue" :duration="3200" class="card-panel-num" />
          </div>
        </div>
      </el-col>
      <el-col :xs="24" :sm="12" :lg="6" class="card-panel-col">
        <div class="card-panel" @click="handleSetLineChartData('shoppings')">
          <div class="card-panel-icon-wrapper icon-shopping">
            <i class="el-icon-money card-panel-icon"></i>
          </div>
          <div class="card-panel-description">
            <div class="card-panel-text">无限赏抽成</div>
          </div>
        </div>
      </el-col>
    </el-row>

    <el-row :gutter="15" class="panel-group">
      <el-col :xs="24" :sm="12" :lg="6" class="card-panel-col">
        <div class="card-panel" @click="handleSetLineChartData('shoppings')">
          <div class="card-panel-icon-wrapper icon-shopping">
            <i class="el-icon-shopping-bag-1 card-panel-icon"></i>
          </div>
          <div class="card-panel-description">
            <div class="card-panel-text">M币总余额</div>
            <count-to :start-val="0" :end-val="profit.mb" :duration="3600" class="card-panel-num" />
          </div>
        </div>
      </el-col>

      <el-col :xs="24" :sm="12" :lg="6" class="card-panel-col">
        <div class="card-panel" @click="handleSetLineChartData('shoppings')">
          <div class="card-panel-icon-wrapper icon-shopping">
            <i class="el-icon-pie-chart card-panel-icon"></i>
          </div>
          <div class="card-panel-description">
            <div class="card-panel-text">用户总积分</div>
            <count-to :start-val="0" :end-val="profit.无限" :duration="3600" class="card-panel-num" />
            {{profit.无限}}
          </div>
        </div>
      </el-col>

      <el-col :xs="24" :sm="12" :lg="6" class="card-panel-col">
        <div class="card-panel" @click="changtime(1)">
          <div class="card-panel-icon-wrapper icon-shopping">
            <i class="el-icon-pie-chart card-panel-icon"></i>
          </div>
          <div class="card-panel-description">
            <div class="card-panel-text">一番赏盈亏</div>
            <count-to :start-val="0" :end-val="yfsyk" :duration="3600" class="card-panel-num" />
            <div style="font-size: 5px">
              {{
                  this.value2[0].split("-")[1] +
                  "-" +
                  this.value2[0].split("-")[2] +
                  "~" +
                  this.value2[1].split("-")[1] +
                  "-" +
                  this.value2[1].split("-")[2]
              }}
            </div>
          </div>
        </div>
      </el-col>
      <el-col :xs="24" :sm="12" :lg="6" class="card-panel-col">
        <div class="card-panel">
          <div class="card-panel-icon-wrapper icon-shopping">
            <i class="el-icon-pie-chart card-panel-icon"></i>
          </div>
          <div class="card-panel-description">
            <div class="card-panel-text">无限赏盈亏</div>
            <count-to :start-val="0" :end-val="wxsyk" :duration="3600" class="card-panel-num" />
          </div>
        </div>
      </el-col>
    </el-row>

    <el-dialog title="选择时间" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <el-form-item label="时间区间" :label-width="formLabelWidth">
          <el-date-picker value-format="yyyy-MM-dd HH:mm:ss" v-model="value2" @change="getOneProfit"
            type="datetimerange" :picker-options="pickerOptions" range-separator="至" start-placeholder="开始日期"
            end-placeholder="结束日期" align="right">
          </el-date-picker>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="getOneProfit">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import CountTo from "vue-count-to";
import {
  user_total,
  user_profit,
  user_profit_one,
  user_profit_infinite,
  tongji,
} from "../../api/dashboard";
import { listMy_user, getMy_user_bag } from "@/api/users/user.js";
export default {
  data() {
    return {
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
      dialogFormVisible: false,
      total: null,
      profit: null,
      value2: [],
      yfsyk: null,
      wxsyk: null,
      userType: 0,

      yfs_money: 0,
      timer: "",
      num: 0,
      time: null,
      if_bage: true,
    };
  },
  components: {
    CountTo,
  },
  methods: {
    handleSetLineChartData(type) {
      this.$emit("handleSetLineChartData", type);
      if (type == "newVisitis") {
        this.$router.push("/users/userlist");
      }
    },
    //获取数据
    getData() {
      user_total().then((res) => {
        this.total = res.data;
        console.log(this.total);
      });
      this.listMy_user();
      this.tongji();
    },
    start() {
      this.timer = setInterval(this.getData, 2000); // 注意: 第一个参数为方法名的时候不要加括号;
    },



    //计算玩家当日背包价值
    async getMy_user_bag(ID) {
      let date = Date.parse(this.time);  //用户重置时间

      console.log(date);

      await getMy_user_bag({
        userId: ID,
        status: 1,
        insurance: "0",
        orderType: 1,
        yfOrWx: "0",
      }).then((res) => {

        res.data.list.forEach((item) => {

          if (Date.parse(new Date(item.createDate)) > date) {
            this.num += item.outPrice * item.count;
          }

        });
        getMy_user_bag({
          userId: ID,
          status: 1,
          insurance: "1",
          orderType: 1,
          yfOrWx: "0",
        }).then((res_1) => {

          res_1.data.list.forEach((item_1) => {

            if (Date.parse(new Date(item_1.createDate)) > date) {
              this.num += item_1.outPrice * item_1.count;

            }

          });

        });
      });
    },

    //获取一番上特权账号盈亏情况
    async listMy_user() {
      this.yfs_money = 0;
      listMy_user({
        isAsc: "desc",
        orderByColumn: "addtime",
        pageNum: 1,
        pageSize: 100,
        ifPrivateDq: 1,
      }).then(async res => {
        for (let index = 0; index < res.rows.length; index++) {
          this.num = 0;


          if (this.if_bage) {
            await this.getMy_user_bag(res.rows[index].id);
          }
          console.log(this.num, res.rows[index].id);
          this.yfs_money += res.rows[index].money + this.num - res.rows[index].userTodayMoney;
        }

      });
    },

    chang_ifbage() {
      this.getData()
    },

    chang_ifbage_time(e) {
      console.log(e);
      this.time = e
      this.getData()
    },
    changtime() {
      console.log("sss");
      this.dialogFormVisible = true;
    },

    //一番赏盈亏
    getOneProfit() {
      this.dialogFormVisible = false;
      user_profit_one({
        start: this.value2[0],
        end: this.value2[1],
      }).then((res) => {
        this.yfsyk = res.data;

        console.log(this.profit);
      });
    },
    //无限赏盈亏
    getInfiniteProfit() {
      user_profit_infinite({
        start: this.value2[0],
        end: this.value2[1],
      }).then((res) => {
        this.wxsyk = res.data;
        console.log(this.profit);
      });
    },
    msToDate(msec) {
      let datetime = new Date(msec);
      let year = datetime.getFullYear();
      let month = datetime.getMonth();
      let date = datetime.getDate();
      let hour = datetime.getHours();
      let minute = datetime.getMinutes();
      let second = datetime.getSeconds();

      let result1 =
        year +
        "-" +
        (month + 1 >= 10 ? month + 1 : "0" + (month + 1)) +
        "-" +
        (date + 1 < 10 ? "0" + date : date) +
        " " +
        (hour + 1 < 10 ? "0" + hour : hour) +
        ":" +
        (minute + 1 < 10 ? "0" + minute : minute) +
        ":" +
        (second + 1 < 10 ? "0" + second : second);

      let result2 =
        year +
        "-" +
        (month + 1 >= 10 ? month + 1 : "0" + (month + 1)) +
        "-" +
        (date + 1 < 10 ? "0" + date : date);

      let result = {
        hasTime: result1,
        withoutTime: result2,
      };

      return result;
    },

    gettime(val) {
      //获取前一天及今天的数据
      let ts_begin = new Date();
      let ts_end = new Date();
      ts_begin.setTime(
        ts_begin.getTime() -
        3600 * 1000 * ts_begin.getHours() -
        60 * 1000 * ts_begin.getMinutes() -
        1000 * ts_begin.getSeconds()
      );
      ts_end.setTime(ts_begin.getTime() + 3600 * 1000 * 24 - 1000);
      //格式化Sat Jul 23 2022 00:00:00 GMT+0800 (中国标准时间)

      this.value2 = [
        this.msToDate(ts_begin).hasTime,
        this.msToDate(ts_end).hasTime,
      ];
      this.time = this.value2[0]
      console.log(this.value2);
    },

    tongji() {
      tongji(this.userType).then((res) => {
        console.log(res);
        this.profit = res.data;
      });
    },

    change_type() {
      this.getData();
    },
  },
  created() {
    this.gettime();
    this.getOneProfit();
    this.getInfiniteProfit();
    this.getData();
    // this.start();
  },
  beforeDestroy() {
    clearInterval(this.timer);
  },
};
</script>

<style lang="scss" scoped>
.panel-group {
  margin-top: 18px;

  .card-panel-col {
    margin-bottom: 20px;
  }

  .card-panel {
    height: 108px;
    cursor: pointer;
    font-size: 12px;
    position: relative;
    overflow: hidden;
    color: #666;
    background: #fff;
    box-shadow: 4px 4px 40px rgba(0, 0, 0, 0.05);
    border-color: rgba(0, 0, 0, 0.05);

    &:hover {
      .card-panel-icon-wrapper {
        color: #fff;
      }

      .icon-people {
        background: #40c9c6;
      }

      .icon-message {
        background: #36a3f7;
      }

      .icon-money {
        background: #f4516c;
      }

      .icon-shopping {
        background: #34bfa3;
      }
    }

    .icon-people {
      color: #40c9c6;
    }

    .icon-message {
      color: #36a3f7;
    }

    .icon-money {
      color: #f4516c;
    }

    .icon-shopping {
      color: #34bfa3;
    }

    .card-panel-icon-wrapper {
      float: left;
      margin: 14px 0 0 14px;
      padding: 16px;
      transition: all 0.38s ease-out;
      border-radius: 6px;
    }

    .card-panel-icon {
      float: left;
      font-size: 48px;
    }

    .card-panel-description {
      float: right;
      font-weight: bold;
      margin: 26px;
      margin-left: 0px;

      .card-panel-text {
        line-height: 18px;
        color: rgba(0, 0, 0, 0.45);
        font-size: 16px;
        margin-bottom: 12px;
      }

      .card-panel-num {
        font-size: 20px;
      }
    }
  }
}
</style>
